<template>
	<view>
		<view class="margin" style="border-radius: 20rpx;background-color: #fff;border: 10rpx #fff solid">
			<view style="display:flex;justify-content: space-between;flex-wrap: wrap;">
				<view class="zuoduiqi" v-for="item in tempRegister">
					<view class="statuswidth">{{ item.name }}</view>
					<image :src="parseImage(item.index)" class="statusicon" style="width: 35rpx; height: 35rpx;">
					</image>
				</view>
			</view>
			<view class="juzhong" @click="lookMore()" style="padding-top: 10rpx;">
				<image v-if="!needMore" src="/static/images/fx/down.png" style="width: 30rpx; height: 30rpx;"></image>
				<image v-if="needMore" src="/static/images/fx/up.png" style="width: 30rpx; height: 30rpx;"></image>
			</view>
		</view>

		<!-- 上层信息框 -->
		<view class="topInfo baseBack">
			<view class="flex align-center" style="justify-content: center;">
				<view style="margin-top: 10rpx;font-size: 10rpx; color: gray;">采集器编号：{{ item.devSn }}</view>
				<button class="cu-btn round bg-mauve sm" style="margin-top: 10rpx;margin-left: 10rpx;"
					@click="copySn">复制</button>
			</view>
			<view class="flex align-center" style="justify-content: center;">
				<view class="cardNumber">{{ item.devNum }}</view>
				<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx; font-size: 10rpx;">机台号</view>
			</view>

			<view style="padding-bottom: 10rpx; color: grey;" class="flex align-center">
				<view class="pp"></view>
				<view class="filed">挡车工</view>
				<view class="pva">：{{ item.empName != null ? item.empName : '暂无' }}</view>
			</view>
			<view style="color: grey;" class="flex align-center">
        <view class="pp"></view>
        <view class="filed">上班时间</view>
        <view class="pva">：{{ item.empName != null ? parseWorkTime(item.empInfo) : '' }}</view>
      </view>

		</view>

		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>

		<!-- 中层信息框 -->
		<view class="middleInfo baseBack">
			<view class="flex align-center opBlouk">
				<view class="pp"></view>
				<view class="filed">机台位置</view>
				<view class="pva">：{{ item.areaName != null ? item.areaName + " / " : '' }}{{ item.location }}</view>
			</view>
			<view class="flex align-center opBlouk">
				<view class="pp"></view>
				<view class="filed">布种名称</view>
				<view class="pva">：{{ item.clName || '' }}</view>
			</view>
			<view class="flex align-center opBlouk">
				<view class="pp"></view>
				<view class="filed">布种类型</view>
				<view class="pva">：{{ item.clType || '' }}</view>
			</view>
			<view class="flex align-center opBlouk">
				<view class="pp"></view>
				<view class="filed">客户</view>
				<view class="pva">：{{ item.companyName || '' }}</view>
			</view>
			<view class="flex align-center opBlouk">
				<view class="pp"></view>
				<view class="filed">机台转速</view>
				<view class="pva">：{{ speed || "" }}</view>
			</view>

			<view class="conXuxian">
				<view class="splitArea"></view>
			</view>

			<view class="flex align-center opBlouk" v-for="(item,index) in banTypes">
				<view class="pp"></view>
				<view class="filed">{{ item.name }}</view>
				<view class="pva">{{ '：' + parseClazz(index) }}</view>
			</view>

			<view class="conXuxian">
				<view class="splitArea"></view>
			</view>

			<view class="flex align-center opBlouk" v-for="item in cloths">
				<view class="pp"></view>
				<view class="filed">{{item.name}}</view>
				<view class="pva">{{'：'+item.val}}</view>
			</view>

			<view class="conXuxian">
				<view class="splitArea"></view>
			</view>

			<view class="flex align-center opBlouk" v-for="item in others">
				<view class="pp"></view>
				<view class="filed">{{item.name}}</view>
				<view class="pva">{{'：'+item.val}}</view>
			</view>
		</view>

		<watermark :text="companyName"></watermark>
		<view class="margin" v-if="isShow()" style="padding-bottom: 20rpx;">
			<button @click="handleDel" class="cu-btn block line-mauve round lg">注销</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" content="确定注销该设备吗？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import {
  getDevice,
  delDevice
} from '@/api/company/device.js'
import watermark from 'components/warter/watermark.vue'
import moment from 'moment';

export default {
  components: {
    watermark
  },
  data() {
    return {
      companyName: this.$store.getters.name,
      userType: '',
      static_url: getApp().globalData.config.appInfo.static_image_url,
      item: {
					deviceId: '',
					companyId: '',
					devModel: '',
					isActive: '',
					isOnline: '',
					devNum: '',
					devSpeed: '',
					empId: '',
				},
				needMore: true,
				tempRegister: [],
				register: [{
						name: '上断纱',
						index: 0
					},
					{
						name: '下断纱',
						index: 1
					},
					{
						name: '探针',
						index: 2
					},
					{
						name: '破布',
						index: 3
					},
					{
						name: '缺油',
						index: 4
					},
					{
						name: '缺气',
						index: 5
					},
					{
						name: '安全门',
						index: 6
					},
					{
						name: '变频',
						index: 7
					},
					{
						name: '保险丝',
						index: 8
					},
					{
						name: '强迫',
						index: 10
					},
					{
						name: '清车',
						index: 11
					},
					{
						name: '风扇',
						index: 12
					},
					{
						name: '照布',
						index: 13
					},
					{
						name: '照明',
						index: 14
					},
					{
						name: '马达',
						index: 15
					},
					{
						name: '油泵',
						index: 16
					},
					{
						name: '点动',
						index: 19
					},
					{
						name: '超速',
						index: 20
					},
					{
						name: '到布',
						index: 21
					},
					{
						name: '分层',
						index: 23
					},
					{
						name: '编码器',
						index: 24
					}
				],
				speed: '',
				nowBan: 0,
				banTypes: [{
						name: 'A班',
						val: 0
					},
					{
						name: 'B班',
						val: 0
					},
					{
						name: 'C班',
						val: 0
					},
					{
						name: '总数',
						val: 0
					}
				],
				cloths: [{
						name: '纱长1',
						val: 0
					},
					{
						name: '纱长2',
						val: 0
					},
					{
						name: '纱长3',
						val: 0
					},
					{
						name: '纱长4',
						val: 0
					},
				],
				others: [{
						name: '织布模式',
						val: 0
					},
					{
						name: '织布设定值',
						val: 0
					},
					{
						name: '织布计数值',
						val: 0
					},
					{
						name: '清车设定值',
						val: 0
					},
					{
						name: '运行档位设定值',
						val: 0
					},
					{
						name: '调速锁定值',
						val: 0
					}
				],
				dataAry: [],
				refresh: null,
			}
		},

		onPullDownRefresh() {
			getDevice(this.item.deviceId).then(res => {
				uni.stopPullDownRefresh()
				this.item = res.data
				if (this.item.status != null) {
					this.parseStatus(this.item.status)
				}
			})
		},

		onLoad(option) {
			this.lookMore()
			getDevice(option.devId).then(res => {
				this.item = res.data
				if (this.item.status != null) {
					this.parseStatus(this.item.status)
				}
			})
			let that = this
			let id = option.devId
			this.refresh = setInterval(function() {
				getDevice(id).then(res => {
					that.item = res.data
					if (that.item.status != null) {
						that.parseStatus(that.item.status)
					}
				})
			}, 5000)
		},
		mounted() {

		},
		onHide() {
			clearInterval(this.refresh)
		},
		onUnload() {
			clearInterval(this.refresh)
		},

		options: {
			styleIsolation: 'shared',
		},
		methods: {
			parseWorkTime(item) {
				if (item) {
          let yyyy = _.parseInt(item.substring(48, 50), 16)
          let MM = _.padStart(_.parseInt(item.substring(50, 52), 16), 2, '0')
          let dd = _.padStart(_.parseInt(item.substring(52, 54), 16), 2, '0')
          let HH = _.padStart(_.parseInt(item.substring(54, 56), 16), 2, '0')
          let mm = _.padStart(_.parseInt(item.substring(56, 58), 16), 2, '0')
          let ss = _.padStart(_.parseInt(item.substring(58, 60), 16), 2, '0')
          return '20' + yyyy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
        } else {
					return ''
				}
			},
			copySn() {
				uni.setClipboardData({
					data: String(this.item.devSn), // 必须字符串
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},
			lookMore() {
				this.needMore = !this.needMore
				if (this.needMore) {
					this.tempRegister = this.register
				} else {
					this.tempRegister = _.slice(this.register, 0, 9)
				}
			},

			isShow() {
				return this.$store.getters.userType === '1'
			},

			parseClazz(clazz) {
				let now = this.banTypes[clazz]
				if (clazz == this.nowBan) {
					return now.val + " (当前)"
				} else {
					return now.val
				}
			},

			/**
			 * 是否故障
			 */
			parseImage(item) {
				let pic = ''
				if (item <= 8 || item === 20) {
					pic = this.dataAry[item] ? 'red' : 'greyw'
				} else {
					pic = this.dataAry[item] ? 'green' : 'greyw'
				}
				return '/static/images/devicestatus/' + pic + '.png'
			},

			/**
			 * 解析状态（寄存器0）
			 */
			parseStatus(item) {
				let tempAry = []
				for (var i = 0; i < 60; i++) {
					tempAry.push(item.substr(i * 8, 8))
				}
				let data = parseInt('0X' + tempAry[0]).toString(2)
				let ary = new Array(32).fill(0)
				for (var i = 0; i < data.length; i++) {
					ary[i] = parseInt(data.charAt(data.length - 1 - i))
				}
				//第0寄存器状态数组
				this.dataAry = ary
				this.speed = _.parseInt(tempAry[7], 16) / 10
				this.jishu(tempAry)
				this.clothLength(tempAry)
				this.otherSet(tempAry)
			},

			/**
			 * 解析计数班别班数
			 */
			jishu(item) {
				this.nowBan = _.parseInt(item[1].charAt(item[1].length - 1), 16)
				this.banTypes[0].val = _.parseInt(item[2], 16)
				this.banTypes[1].val = _.parseInt(item[3], 16)
				this.banTypes[2].val = _.parseInt(item[4], 16)
				// this.ban.D = _.parseInt(item[5], 16)
				this.banTypes[3].val = _.parseInt(item[6], 16)
			},
			/**
			 * 解析纱长
			 */
			clothLength(item) {
				let a = Big(_.parseInt(item[8], 16))
				let b = Big(_.parseInt(item[9], 16))
				let c = Big(_.parseInt(item[10], 16))
				let d = Big(_.parseInt(item[11], 16))
				Big.DP = 2;
				this.cloths[0].val = a.div(100).toFixed(2)
				this.cloths[1].val = b.div(100).toFixed(2)
				this.cloths[2].val = c.div(100).toFixed(2)
				this.cloths[3].val = d.div(100).toFixed(2)
			},

			/**
			 * 其他面板参数
			 */
			otherSet(item) {
				this.others[0].val = _.parseInt(item[19], 16)
				this.others[1].val = _.parseInt(item[20], 16)
				this.others[2].val = _.parseInt(item[21], 16)
				this.others[3].val = _.parseInt(item[24], 16)
				this.others[4].val = _.parseInt(item[28], 16)
				this.others[5].val = _.parseInt(item[29], 16)
			},

			goBack() {
				this.$tab.navigateBack()
			},

			/**
			 * 删除设备
			 */
			handleDel() {
				this.$refs.alertDialog.open()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			dialogConfirm() {
				delDevice(this.item.deviceId).then(res=>{
					this.$refs.alertDialog.close()
					uni.navigateBack({delta:1})
				})
			},
		}
	}
</script>

<style>
	.filed {
		font-size: 20rpx;
		width: 25%;
		white-space: normal;
		text-align: justify;
		text-align-last: justify;
	}

	.pva {
		font-size: 25rpx;
		margin-right: 6rpx;
		color: black;
	}

	.juzhong {
		flex-flow: row;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.zuoduiqi {
		width: 33%;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}


	.statusicon {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
	}

	.statuswidth {
		width: 60%;
		padding-left: 20rpx;
	}

	.pv {
		font-weight: bold;
		margin-right: 6rpx;
	}

	.pt {
		color: #353535;
	}

	/*  */
	.cardNumber {
		color: #AC58FA;
		font-size: 45rpx;
		margin: 20rpx 0rpx 30rpx 40rpx;
	}

	.topInfo {
		align-items: center;
		margin: 28rpx auto 0rpx auto;
	}

	.middleInfo {
		margin: 0rpx auto;
		padding-bottom: 20rpx;
	}

	.conUp {
		width: 92%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-image: radial-gradient(circle at 448rpx 50rpx, transparent 0%, transparent 8px, #fff 8px, #fff 100%);
		background-position: 244rpx -16rpx;
		margin: 0rpx auto;
	}

	.conXuxian {
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.splitArea {
		border: none;
		border-top: 3rpx dashed #d8d8d8;
		width: 85%;
	}

	.baseBack {
		width: 92%;
		background-color: #fff;
	}

	.opBlouk {
		padding-bottom: 10rpx;
		color: grey;
	}

	.pp {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: grey;
		margin: 0rpx 30rpx 0rpx 50rpx;
	}
</style>
